<page-header-wrapper [title]="'商品'">
    <nz-card [nzBordered]="false" class>
        <!-- serch begin -->
        <form nz-form [nzLayout]="'inline'" (ngSubmit)="serchData()" class="search__form">
            <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
                <div nz-col nzMd="8" nzSm="24">
                    <nz-form-item>
                        <nz-form-label nzFor="text">商品规格</nz-form-label>
                        <nz-form-control>
                            <input nz-input [(ngModel)]="query.condition.text" name="text" placeholder="请输入" id="text">
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col nzMd="8" nzSm="24">
                    <nz-form-item>
                        <nz-form-label nzFor="name">商品名称</nz-form-label>
                        <nz-form-control>
                            <input nz-input [(ngModel)]="query.condition.name" name="name" placeholder="请输入" id="name">
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col nzMd="8" nzSm="24" *ngIf="expandForm">
                    <nz-form-item>
                        <nz-form-label nzFor="brand">品牌</nz-form-label>
                        <nz-form-control>
                            <input nz-input [(ngModel)]="query.condition.brand" name="brand" placeholder="请输入"
                                id="brand">
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col nzMd="8" nzSm="24" *ngIf="expandForm">
                    <nz-form-item>
                        <nz-form-label nzFor="isShelves">是否上架</nz-form-label>
                        <nz-form-control>
                            <input nz-input [(ngModel)]="query.condition.isShelves" name="isShelves" placeholder="请输入"
                                id="isShelves">
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="expandForm ? 24 : 8" [class.text-right]="expandForm">
                    <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading">查询</button>
                    <button nz-button type="reset" (click)="reset()" class="mx-sm">重置</button>
                    <a (click)="expandForm = !expandForm">
                        {{ expandForm ? '收起' : '展开' }}
                        <i nz-icon [nzType]="expandForm ? 'up' : 'down'"></i>
                    </a>
                </div>
            </div>
        </form>
        <!-- serch end -->

        <!-- button begin-->
        <button nz-button (click)="add()" [nzType]="'primary'">
            <i nz-icon nzType="plus"></i>
            <span>新建</span>
        </button>
        <button nz-button (click)="getData()" [nzType]="'primary'">
            <i nz-icon nzType="reload"></i>
            <span>刷新</span>
        </button>
        <!-- <ng-container *ngIf="selectedRows.length > 0">
            <button nz-button nz-dropdown [nzDropdownMenu]="batchMenu" nzPlacement="bottomLeft">
                更多操作
                <i nz-icon nzType="down"></i>
            </button>
            <nz-dropdown-menu #batchMenu="nzDropdownMenu">
                <ul nz-menu>
                    <li nz-menu-item (click)="batchDeleteConfirm()">批量删除</li>
                </ul>
            </nz-dropdown-menu>
        </ng-container> -->
        <div class="my-md">
            <nz-alert [nzType]="'info'" [nzShowIcon]="true" [nzMessage]="message">
                <ng-template #message>
                    已选择
                    <strong class="text-primary">{{ selectedRows.length }}</strong>
                    项
                    <a *ngIf="selectedRows.length > 0" (click)="st.clearCheck()" class="ml-lg">清空</a>
                </ng-template>
            </nz-alert>
        </div>
        <!-- button end-->

        <!-- table begin-->
        <st #st [columns]="columns" [data]="data" [pi]="query.pageNo" [ps]="query.pageSize" [page]="page.pageParam"
            [total]='page.total' [loading]="loading" (change)="stChange($event)" [expand]="expand">

            <!-- 可展开模板 begin -->
            <ng-template #expand let-item let-index="index" let-column="column">
                <!-- 图片 -->
                <div style="display: flex;padding:5px;flex-wrap: wrap;">
                    <div *ngFor="let itemImg of item?.fileList" style="padding-right: 10px;padding-bottom: 10px">
                        <img style="max-width: 105px;max-height: 105px;" [src]="showIcon(itemImg?.filePath)">
                        <div><span style="font-weight: bold;">封面图：</span>{{itemImg?.isCover}}</div>
                        <div><a nz-dropdown [nzDropdownMenu]="menu">
                                操作
                                <i nz-icon nzType="down"></i>
                            </a>
                            <nz-dropdown-menu #menu="nzDropdownMenu">
                                <ul nz-menu nzSelectable>
                                    <li (click)="updatePhoto(itemImg)" nz-menu-item>设置为封面图</li>
                                    <li (click)="deletePhoto(itemImg)" nz-menu-item>删除照片</li>
                                </ul>
                            </nz-dropdown-menu>
                        </div>
                    </div>
                    <div style="position:relative">
                        <button (click)="uploadFile(item)"
                            style="width: 105px;height: 105px;align-items: center;justify-content: center;display: flex;"
                            nz-button nzType="dashed">
                            <div><i nz-icon nzType="plus" class="upload-icon-zfy"></i></div>
                            <div class="ant-upload-text">图片上传</div>
                        </button>
                        <input #file type="file" multiple="multiple" (change)="fileSelect($event)" id="file"
                            style="display: none;" />
                    </div>
                </div>

                <!-- 参数 -->
                <div style="padding: 10px;">
                    <div style="position: relative;text-align: center;font-size: 20px;height: 50px;">
                        <div
                            style="border-bottom: 1px solid #ddd;width: calc(50% - 55px);position: absolute; top:15px;left: 0;">
                        </div>
                        <span>商品参数</span>
                        <div
                            style="border-bottom: 1px solid #ddd;width: calc(50% - 55px);position: absolute; top:15px;right: 0;">
                        </div>
                    </div>
                    <div style="padding: 10px 0;"><button (click)="addChildRen()" nz-button
                            [nzType]="'primary'">新增商品属性</button>
                    </div>
                    <!-- 子表格 -->
                    <st #childrenSt [columns]="childrenColumns" [data]="item?.dataChildRen" [page]="pageParam">
                    </st>

                </div>
            </ng-template>
            <!-- 可展开模板 end -->

        </st>
        <!-- table end-->

    </nz-card>

    <!-- model template begin-->
    <ng-template #modalContent>
        <form nz-form [formGroup]="form">
            <input nz-input formControlName="goodsId" hidden>
            <input nz-input formControlName="specificationId" hidden>
            <input nz-input formControlName="text" hidden>
            <nz-row nzGutter="16">
                <nz-col nzMd="12">
                    <nz-form-item>
                        <nz-form-label nzFor="tempText">产品规格</nz-form-label>
                        <nz-form-control nzErrorTip="请选择规格">
                            <nz-select formControlName="tempText" id="tempText" (ngModelChange)="provinceChange($event)"
                                nzAllowClear nzPlaceHolder="请选择规格">
                                <nz-option *ngFor="let item of specificationList"
                                    [nzValue]="item.text + ',' +item.specificationId" [nzLabel]="item.text"></nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>

                <nz-col nzMd="12">
                    <nz-form-item>
                        <nz-form-label nzFor="name">商品名称</nz-form-label>
                        <nz-form-control nzErrorTip="请输入商品名称">
                            <input nz-input formControlName="name" id="name" placeholder="请输入商品名称">
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>
            </nz-row>
            <nz-row nzGutter="16">
                <nz-col nzMd="12">
                    <nz-form-item>
                        <nz-form-label nzFor="brand">品牌</nz-form-label>
                        <nz-form-control nzErrorTip="请输入品牌">
                            <input nz-input formControlName="brand" id="brand" placeholder="请输入品牌名称">
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>

                <nz-col nzMd="12">
                    <nz-form-item>
                        <nz-form-label nzFor="isShelves">是否上架</nz-form-label>
                        <nz-form-control nzErrorTip="是否上架">
                            <nz-select formControlName="isShelves" id="isShelves" nzAllowClear nzPlaceHolder="请选择状态">
                                <nz-option nzValue="是" nzLabel="是"></nz-option>
                                <nz-option nzValue="否" nzLabel="否"></nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>
            </nz-row>
            <nz-row nzGutter="16">
                <nz-col nzMd="12">
                    <nz-form-item>
                        <nz-form-label nzFor="minPrice">最低价格（人民币）</nz-form-label>
                        <nz-form-control nzErrorTip="请选择最低价格">
                            <nz-input-number formControlName="minPrice" id="minPrice" [nzStep]="1" nzPlaceHolder="最低价格">
                            </nz-input-number>
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>

                <nz-col nzMd="12">
                    <nz-form-item>
                        <nz-form-label nzFor="retailPrice">厂家推荐零售价（人民币）</nz-form-label>
                        <nz-form-control nzErrorTip="请输入厂家推荐零售价">
                            <nz-input-number formControlName="retailPrice" id="retailPrice" [nzStep]="1"
                                nzPlaceHolder="厂家推荐零售价"></nz-input-number>
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>
            </nz-row>
        </form>
    </ng-template>
    <!-- model template end-->


    <!-- model template begin-->
    <ng-template #modalContentChildRen>
        <form nz-form [formGroup]="formChildRen">
            <input nz-input formControlName="goodsId" hidden>
            <input nz-input formControlName="goodsAttributesId" hidden>
            <input nz-input formControlName="attributesId" hidden>
            <nz-row nzGutter="16">
                <nz-col nzMd="12">
                    <nz-form-item>
                        <nz-form-label nzFor="tempText">属性名称</nz-form-label>
                        <nz-form-control nzErrorTip="请选择属性">
                            <nz-select formControlName="tempText" id="tempText"
                                (ngModelChange)="provinceChangeChildRen($event)" nzAllowClear nzPlaceHolder="请选择规格">
                                <nz-option *ngFor="let item of attributesIdList"
                                    [nzValue]="item.name + ',' +item.attributesId" [nzLabel]="item.name"></nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>

                <nz-col nzMd="12">
                    <nz-form-item>
                        <nz-form-label nzFor="value">属性值</nz-form-label>
                        <nz-form-control nzErrorTip="请输入属性值">
                            <input nz-input formControlName="value" id="value" placeholder="请输入属性值">
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>
            </nz-row>
            <nz-row nzGutter="16">
                <nz-col nzMd="12">
                    <nz-form-item>
                        <nz-form-label nzFor="serialNumber">排序值</nz-form-label>
                        <nz-form-control nzErrorTip="请选择排序值">
                            <nz-input-number formControlName="serialNumber" id="serialNumber" [nzStep]="1"
                                nzPlaceHolder="排序值">
                            </nz-input-number>
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>
            </nz-row>
        </form>
    </ng-template>
    <!-- model template end-->


    <!-- begin -->
    <nz-drawer [nzBodyStyle]="{ height: 'calc(100% - 115px)', overflow: 'auto', 'padding-bottom': '53px' }"
        [nzMaskClosable]="false" [nzWidth]="1000" [nzVisible]="visible" nzTitle="商品详情" (nzOnClose)=" close()">
        <!-- <simplemde [ngModel]="value" (ngModelChange)="_change($event)">
        </simplemde> -->

        <!-- 左边按钮 -->
        <div style="position: relative;">
            <div style="width: calc(50% - 10px);position: absolute;left: 0;;top: 0;">
                <nz-upload nzListType="picture-card" nzMultiple="true" [(nzFileList)]="fileList" [nzRemove]="remove"
                    [nzShowUploadList]="showUploadList" [nzBeforeUpload]="beforeUpload">
                    <i nz-icon nzType="plus" class="upload-icon-zfy"></i>
                    <div class="ant-upload-text">图片上传</div>
                </nz-upload>
                <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null"
                    (nzOnCancel)="previewVisible = false">
                    <ng-template #modalContent>
                        <img [src]="previewImage" [ngStyle]="{ width: '100%' }" />
                    </ng-template>
                </nz-modal>
            </div>

            <!-- 右边展示 -->
            <div style="width: calc(50% - 10px);position: absolute;right: 0;top: 0;overflow-y: auto;"
                [ngStyle]="{'height': 'calc(' + height + 'px - 145px)'}">
                <div *ngFor="let item of fileList">
                    <img style="width: 100%;" [src]="item.url">
                </div>
            </div>
        </div>

        <div class="footer">
            <button type="button" (click)="close()" class="ant-btn" style="margin-right: 8px;"><span>关闭</span></button>
            <!-- <button type="button" (click)="close()" class="ant-btn ant-btn-primary"><span>确定</span></button> -->
        </div>
    </nz-drawer>
    <!-- end -->
</page-header-wrapper>

<router-outlet></router-outlet>